<template>
  <div class="x-cameraitem">
    <!-- <div v-for="(item,index) in listData" :key="index" class="camera-ctx">
      <div class="ctx-pic">
        <img class="pic" :src="'data:image/jpg;base64,'+item.pic" />
      </div>
      <div class="ctx-txt">
        <div class="name">{{item.license}}</div>
        <div class="time">CamerID:{{item.camerId}}</div>
        <div class="time">{{timeFormat(item.startTime)}}</div>
      </div>
    </div>-->
    <vue-scroll
      :class-option="optionSetting"
      class="scroll-ctx"
      :class="{ 'scroll-h': isName }"
      :data="listData"
    >
      <ul class="ctx-item">
        <li
          @click="onRowClick(item)"
          v-for="(item, index) in listData"
          class="item-li"
          :key="index"
        >
          <div class="ctx-pic" style="cursor: pointer;" @click="picshow(item.pic)">
            <img class="pic" :src="item.pic |filterimgsrc" />
          </div>
          <div class="ctx-txt">
            <div class="name">车牌：{{ item.license }}</div>
            <div class="time">位置：{{ item.camerId }}</div>
            <div class="time">车主：{{ item.name }}</div>
            <div class="time">时间：{{ new Date().dateFtt(item.startTime) }}</div>
            <div class="time">证件号：<div class="bottom_dashed" @click="showdangan(item.idNum)">{{ new String().hideidCard(item.idNum) }}</div></div>
          </div>
        </li>
      </ul>
    </vue-scroll>
    	<el-dialog :visible.sync="dialogVisible" v-if="dialogVisible" v-dialogDrag class="jk-dialog" width="50%">
			<div style="width:786px;height:432px;margin:auto">
				<img :src="picurl |filterimgsrc" alt style="height:100%" />
			</div>
		</el-dialog>
  </div>
</template>
<script>
import request from "@/utils/request";
import VueScroll from "vue-seamless-scroll";
export default {
  name: "xcaritem",
  data() {
    return {
       dialogVisible: false,
        picurl:"",
      listData: [],
      all: [],
      index: 0,
      timer: null,
    };
  },
  computed: {
    optionSetting() {
      return {
        step: 0.4, // 数值越大速度滚动越快

        limitMoveNum: 3, // 开始无缝滚动的数据量 this.dataList.length

        hoverStop: true, // 是否开启鼠标悬停stop

        direction: 1, // 0向下 1向上 2向左 3向右

        openWatch: true, // 开启数据实时监控刷新dom

        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1

        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3

        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      };
    }
  },
  components: {
    VueScroll
  },
  mounted() {
    this.getData();
      if(this.timer){
        clearInterval(this.timer)
      }else{
        this.timer=setInterval(()=>{
          this.getData();
        },18000000)
      }
  },
  destroyed() {
    clearInterval(this.timer)
  },
  methods: {
     picshow (url) {
      this.dialogVisible = !this.dialogVisible
      this.picurl = url
    },
    async getData() {
      // console.log(this.$storage.get("place"));
      // let res = await request.get(
      //   "/api/mapDateInfo/getParkSpaceByPlaceId?placeId=" +
      //     this.$storage.get("place").leader
      // );

      // console.log(res, "///////");
      // this.index = 0;
      // clearTimeout(this.timer);
      // this.all = res.data;
      // this.loopPlay();
      try {
        let reportList = await request.get(
          "/api/mapDateInfo/getParkSpaceByPlaceId?placeId=" +
            this.$storage.get("place").leader
        );

        this.listData = reportList.data;
        if (this.listData.length > 0) {
          // this.play();
        }
      } catch (error) {
        console.log(error);
      }
    },
    loopPlay() {
      this.listData = this.all.slice(this.index, this.index + 3);
      this.timer = setTimeout(() => {
        this.index += 3;
        if (this.index >= this.all.length - 3) {
          this.index = 0;
        }
        this.loopPlay();
      }, 2000);
    },
    timeFormat(str) {
      return str.replace("T", " ").substr(0, 19);
    },
    timeFormat1(date1) {
      var fmt = "yyyy-MM-dd hh:mm:ss";
      // console.log(data)
      var date = new Date(date1);
      var o = {
        "M+": date.getMonth() + 1, //月份
        "d+": date.getDate(), //日
        "h+": date.getHours(), //小时
        "m+": date.getMinutes(), //分
        "s+": date.getSeconds(), //秒
        "q+": Math.floor((date.getMonth() + 3) / 3), //季度
        S: date.getMilliseconds(), //毫秒
        T: "T" //时间分隔符T
      };
      if (/(y+)/.test(fmt))
        fmt = fmt.replace(
          RegExp.$1,
          (date.getFullYear() + "").substr(4 - RegExp.$1.length)
        );
      for (var k in o)
        if (new RegExp("(" + k + ")").test(fmt))
          fmt = fmt.replace(
            RegExp.$1,
            RegExp.$1.length == 1
              ? o[k]
              : ("00" + o[k]).substr(("" + o[k]).length)
          );
      return fmt;
    },
    showdangan(id){
        if(id){
          this.$emit('showdangan',id)
        }
    }
  }
};
</script>
<style lang="less" scoped>
&.scroll-h {
  height: calc(100% - 28px);
}
.x-cameraitem {
  width: 100%;
  height: 100%;
  padding: 0 18px;
  box-sizing: border-box;

  .scroll-ctx {
    width: 100%;
    height: 100%;
    overflow: hidden;
    &.scroll-h {
      height: calc(100% - 28px);
    }
    .ctx-item {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      list-style: none;
      .item-li {
        width: 100%;
        height: 150px;
        padding: 10px 5px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-around;
        align-content: center;
        font-size: 14px;
        .ctx-pic {
          width: 192px;
          height: 108px;
          .pic {
            width: 100%;
            height: 100%;
          }
        }
        .ctx-txt {
          width: 250px;
          padding-left: 15px;
          box-sizing: border-box;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          word-break: normal;
          color: #fff;
          .name {
            width: 100%;
            text-align: left;
          }
          .time {
            text-align: left;
            margin-top: 8px;
          }
        }
      }
    }
  }
  .camera-ctx {
    width: 100%;
    height: 140px;
    padding: 10px 10px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-around;
    align-content: center;
    font-size: 14px;
    .ctx-pic {
      width: 192px;
      height: 108px;
      .pic {
        width: 100%;
        height: 100%;
      }
    }
    .ctx-txt {
      width: 250px;
      padding-left: 15px;
      box-sizing: border-box;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      word-break: normal;
      color: #fff;
      .name {
        width: 100%;
        // font-size: 0.7rem;
        text-align: left;
      }
      .time {
        text-align: left;
        // font-size: 0.6rem;
        margin-top: 8px;
      }
    }
  }
  .scroll {
    width: 100%;
    height: 100%;
    overflow: hidden;
    .animatedTop {
      transition: all 0.5s linear;
    }
  }
}
  .bottom_dashed{
    border-bottom:1px dashed #fff;
    cursor: pointer;
    display:inline-block;
  }
</style>
